<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块级作用域</title>
</head>
<body>
<!--    <div id="app">-->
<!--        -->
<!--    </div>-->
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>

</body>
    <script src="../js/vue.js"></script>
    <script>
        //1.变量作用域：变量在什么范围是可用的。
        // {
        //     var name = 'why';
        //     console.log(name);
        // }
        // console.log(name);

        // var btns = document.getElementsByTagName('button');
        // for (var i=0; i<btns.length; i++){
        //     btns[i].addEventListener('click' ,function () {
        //         console.log('第' + i + '个按钮被点击');
        //     });
        // }

        var btns = document.getElementsByTagName('button');
        for (let i = 0; i < btns.length; i++){
            btns[i].addEventListener('click',function () {
                console.log('第' + (i+1) + '个按钮被点击');
            })
        }
    </script>
</html>